Mivhak.component(ꞌtab-paneꞌ).methods.setEditor - Code Metrics - Inspection of "Improved CSS and comments" - askupasoftware/mivhak.js - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( defa76...33574b )

by Askupa

created 2016-07-16 01:21 UTC

Mivhak.component(ꞌtab-paneꞌ).methods.setEditor A

↳ Parent: src/js/components/tab-pane.js

Complexity

Conditions	2
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	2
c	0
b	0
f	0
nc	2
nop	0
dl	0
loc	51
rs	9.4109

1 Function

Rating	Name	Duplication	Size	Complexity
A	tor	0	3	1

How to fix Long Method

Mivhak.component('tab-pane', {

    template: '<div class="mivhak-tab-pane"><div class="mivhak-tab-pane-inner"></div></div>',
    props: {
        resource:       null,
        editor:         null,
        index:          null,
        padding:        10,
        mivhakInstance: null
    },
    created: function() {
        this.setEditor();
        this.fetchRemoteSource();
        this.markLines();
        
        this.$el = $(this.resource.pre).wrap(this.$el).parent().parent();
        this.$el.find('.mivhak-tab-pane-inner').css({margin: this.mivhakInstance.options.padding});
        this.setScrollbars();
    },
    methods: {
        getTheme: function() {
            return this.mivhakInstance.options.theme === 'light' ? 'clouds' : 'ambiance';
        },
        fetchRemoteSource: function() {
            var $this = this;
            if(this.resource.source) {
                $.ajax(this.resource.source).done(function(res){
                    $this.editor.setValue(res,-1);
                    
                    // Refresh viewport height
                    $this.mivhakInstance.callMethod('setHeight',$this.mivhakInstance.options.height);
                    
                    // Refresh scrollbars
                    raf(function(){
                        $this.vscroll.refresh();
                        $this.hscroll.refresh();
                    });
                });
                
            }
        },
        setScrollbars: function() {
            var $inner = $(this.resource.pre),
                $outer = this.$el.find('.mivhak-tab-pane-inner');
            
            this.vscroll = Mivhak.render('vertical-scrollbar',{editor: this.editor, $inner: $inner, $outer: $outer, mivhakInstance: this.mivhakInstance});

            this.hscroll = Mivhak.render('horizontal-scrollbar',{editor: this.editor, $inner: $inner, $outer: $outer, mivhakInstance: this.mivhakInstance});
            
            this.$el.append(this.vscroll.$el, this.hscroll.$el);
        },
        show: function() {
            this.$el.addClass('mivhak-tab-pane-active');
            this.editor.focus();
            this.editor.gotoLine(0); // Needed in order to get focus
            
            // Recalculate scrollbar positions based on the now visible element
            this.vscroll.initialize();
            this.hscroll.initialize();
        },
        hide: function() {
            this.$el.removeClass('mivhak-tab-pane-active');
        },
        setEditor: function() {
            
            // Remove redundant space from code
            this.resource.pre.textContent = this.resource.pre.textContent.trim(); 
            
            // Set editor options
            this.editor = ace.edit(this.resource.pre);

            this.editor.setReadOnly(!this.mivhakInstance.options.editable);
            this.editor.setTheme("ace/theme/"+this.getTheme());
            this.editor.setShowPrintMargin(false);
            this.editor.renderer.setShowGutter(this.mivhakInstance.options.lineNumbers);
            this.editor.getSession().setMode("ace/mode/"+this.resource.lang);
            this.editor.getSession().setUseWorker(false); // Disable syntax checking
            this.editor.getSession().setUseWrapMode(true); // Set initial line wrapping

            this.editor.setOptions({
                maxLines: Infinity,
                firstLineNumber: this.resource.startLine,
                highlightActiveLine: false,
                fontSize: parseInt(14)
            });
            
            // Update source content for the live preview
            if(this.mivhakInstance.options.editable)
            {
                this.editor.getSession().on('change', (function() {
                    this.mivhakInstance.resources.update(this.index, this.editor.getValue());
                }).bind(this));
            }
            
            // Move view to show cursor position when the cursor moves
            this.editor.session.selection.on("changeCursor", (function(e){
                e.preventDefault();
                raf((function(){
                    var cursor = this.$el.find('.ace_cursor')[0].getBoundingClientRect(),
                        viewport = this.$el.find('.mivhak-tab-pane-inner')[0].getBoundingClientRect(),
                        up =  viewport.top - cursor.top,
                        down = cursor.top + cursor.height - viewport.top - viewport.height,
                        left = parseInt(this.$el.find('.ace_content').css('margin-left').replace('px',''));

                    // Move the scrollbar vertically only if the cursor leaves the viewport
                    this.vscroll.doScroll('up',Math.max(0, up)); //
                    this.vscroll.doScroll('down',Math.max(0, down));
                    this.vscroll.moveBar();
                    
                    // Ace Editor automatically moves the viewport, so we just need to move the scrollbar accordingly
                    this.hscroll.state.l = -left;
                    this.hscroll.moveBar();
                }).bind(this));
            }).bind(this));
        },
        markLines: function()
        {
            if(!this.resource.mark) return;
if (a > 0)
    b = 42;
            var ranges = strToRange(this.resource.mark),
                i = ranges.length,
                AceRange = ace.require("ace/range").Range;


            while(i--)
            {
                this.editor.session.addMarker(
                    new AceRange(ranges[i].start, 0, ranges[i].end, 1), // Define the range of the marker
                    "ace_active-line",     // Set the CSS class for the marker
                    "fullLine"             // Marker type
                );
            }
        }
    }
});

1			Mivhak.component('tab-pane', {
			0 ignored issues – show Bug introduced 2016-07-08 20:36 UTC by Report Bug Copy Issue Report The variable `Mivhak` seems to be never declared. If this is a global, consider adding a `/** global: Mivhak */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
2			template: '<div class="mivhak-tab-pane"><div class="mivhak-tab-pane-inner"></div></div>',
3			props: {
4			resource: null,
5			editor: null,
6			index: null,
7			padding: 10,
8			mivhakInstance: null
9			},
10			created: function() {
11			this.setEditor();
12			this.fetchRemoteSource();
13			this.markLines();
14
15			this.$el = $(this.resource.pre).wrap(this.$el).parent().parent();
16			this.$el.find('.mivhak-tab-pane-inner').css({margin: this.mivhakInstance.options.padding});
17			this.setScrollbars();
18			},
19			methods: {
20			getTheme: function() {
21			return this.mivhakInstance.options.theme === 'light' ? 'clouds' : 'ambiance';
22			},
23			fetchRemoteSource: function() {
24			var $this = this;
25			if(this.resource.source) {
26			$.ajax(this.resource.source).done(function(res){
27			$this.editor.setValue(res,-1);
28
29			// Refresh viewport height
30			$this.mivhakInstance.callMethod('setHeight',$this.mivhakInstance.options.height);
31
32			// Refresh scrollbars
33			raf(function(){
34			$this.vscroll.refresh();
35			$this.hscroll.refresh();
36			});
37			});
38
39			}
40			},
41			setScrollbars: function() {
42			var $inner = $(this.resource.pre),
43			$outer = this.$el.find('.mivhak-tab-pane-inner');
44
45			this.vscroll = Mivhak.render('vertical-scrollbar',{editor: this.editor, $inner: $inner, $outer: $outer, mivhakInstance: this.mivhakInstance});
			0 ignored issues – show Bug introduced 2016-07-08 20:36 UTC by Report Bug Copy Issue Report The variable `Mivhak` seems to be never declared. If this is a global, consider adding a `/** global: Mivhak */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
46			this.hscroll = Mivhak.render('horizontal-scrollbar',{editor: this.editor, $inner: $inner, $outer: $outer, mivhakInstance: this.mivhakInstance});
47
48			this.$el.append(this.vscroll.$el, this.hscroll.$el);
49			},
50			show: function() {
51			this.$el.addClass('mivhak-tab-pane-active');
52			this.editor.focus();
53			this.editor.gotoLine(0); // Needed in order to get focus
54
55			// Recalculate scrollbar positions based on the now visible element
56			this.vscroll.initialize();
57			this.hscroll.initialize();
58			},
59			hide: function() {
60			this.$el.removeClass('mivhak-tab-pane-active');
61			},
62			setEditor: function() {
63
64			// Remove redundant space from code
65			this.resource.pre.textContent = this.resource.pre.textContent.trim();
66
67			// Set editor options
68			this.editor = ace.edit(this.resource.pre);
			0 ignored issues – show Bug introduced 2016-07-08 20:36 UTC by Report Bug Copy Issue Report The variable `ace` seems to be never declared. If this is a global, consider adding a `/** global: ace */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
69			this.editor.setReadOnly(!this.mivhakInstance.options.editable);
70			this.editor.setTheme("ace/theme/"+this.getTheme());
71			this.editor.setShowPrintMargin(false);
72			this.editor.renderer.setShowGutter(this.mivhakInstance.options.lineNumbers);
73			this.editor.getSession().setMode("ace/mode/"+this.resource.lang);
74			this.editor.getSession().setUseWorker(false); // Disable syntax checking
75			this.editor.getSession().setUseWrapMode(true); // Set initial line wrapping
76
77			this.editor.setOptions({
78			maxLines: Infinity,
79			firstLineNumber: this.resource.startLine,
80			highlightActiveLine: false,
81			fontSize: parseInt(14)
82			});
83
84			// Update source content for the live preview
85			if(this.mivhakInstance.options.editable)
86			{
87			this.editor.getSession().on('change', (function() {
88			this.mivhakInstance.resources.update(this.index, this.editor.getValue());
89			}).bind(this));
90			}
91
92			// Move view to show cursor position when the cursor moves
93			this.editor.session.selection.on("changeCursor", (function(e){
94			e.preventDefault();
95			raf((function(){
96			var cursor = this.$el.find('.ace_cursor')[0].getBoundingClientRect(),
97			viewport = this.$el.find('.mivhak-tab-pane-inner')[0].getBoundingClientRect(),
98			up = viewport.top - cursor.top,
99			down = cursor.top + cursor.height - viewport.top - viewport.height,
100			left = parseInt(this.$el.find('.ace_content').css('margin-left').replace('px',''));
101
102			// Move the scrollbar vertically only if the cursor leaves the viewport
103			this.vscroll.doScroll('up',Math.max(0, up)); //
104			this.vscroll.doScroll('down',Math.max(0, down));
105			this.vscroll.moveBar();
106
107			// Ace Editor automatically moves the viewport, so we just need to move the scrollbar accordingly
108			this.hscroll.state.l = -left;
109			this.hscroll.moveBar();
110			}).bind(this));
111			}).bind(this));
112			},
113			markLines: function()
114			{
115			if(!this.resource.mark) return;
			0 ignored issues – show Coding Style Best Practice introduced 2016-07-08 20:36 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
116			var ranges = strToRange(this.resource.mark),
117			i = ranges.length,
118			AceRange = ace.require("ace/range").Range;
			0 ignored issues – show Bug introduced 2016-07-08 20:36 UTC by Report Bug Copy Issue Report The variable `ace` seems to be never declared. If this is a global, consider adding a `/** global: ace */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
119
120			while(i--)
121			{
122			this.editor.session.addMarker(
123			new AceRange(ranges[i].start, 0, ranges[i].end, 1), // Define the range of the marker
124			"ace_active-line", // Set the CSS class for the marker
125			"fullLine" // Marker type
126			);
127			}
128			}
129			}
130			});

askupasoftware / mivhak.js

Push — master ( defa76...33574b )

Mivhak.component(ꞌtab-paneꞌ).methods.setEditor A

Complexity

Size

Duplication

Importance

1 Function

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like